<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>达姆</li>
        <li>老付</li>
        <li>安妮</li>
        <li>陪悦</li>
        <li>小乐</li>
        <li>欣宇</li>
        <li>晓恩</li>
    </ul>
</body>
<script>
    //document-fragment; document有的api 文档碎片都有!
    var ulNode = document.querySelector("ul");
    // var fragment = new DocumentFragment()
    var fragment = document.createDocumentFragment()

    //firstChild: 第一个子节点
    while (ulNode.firstChild){
        //如果添加的节点存在于dom树中 则appendChild执行的是剪切操作!
        fragment.appendChild(ulNode.firstChild)
    }

    //进行大量的dom操作都不会触发界面的重新绘制!!!!
    for(var i=0;i<fragment.children.length;i++){
        fragment.children[i].innerHTML = "尚硅谷-" + fragment.children[i].innerHTML
    }

    ulNode.appendChild(fragment)

    /*var liNodes = document.querySelectorAll("li");
    for(var i=0;i<liNodes.length;i++){
        //触发dom的重新渲染
        liNodes[i].innerHTML = "尚硅谷-" + liNodes[i].innerHTML
    }*/
</script>
</html>